<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <p>{{total}}</p>
        <button @click="addNum()">+</button>
    </div>
    <script>
        //创建Vue对象
        let vue = new Vue({
            el: "#app",
            data: {
                num: 0, //商品数量
                price: 10,
                total: 0, //总价
                user: {
                    name: "张三",
                    age: 10
                }
            },
            watch: {
                //监听num 属性
                num(val, oldVal) { //参数新值和旧值
                    console.log("num: " + val, oldVal);
                    this.total = this.num * this.price;

                },
                //监听对象的属性
                "user.age" (val, oldVal) { //参数新值和旧值
                    console.log("age: " + val, oldVal);


                },
                //深度监听  监听对象内部的属性变化，只要属性有变化就触发handler里面的代码
                user: {
                    handler(val, oldVal) { //参数新值和旧值
                        console.log(this.user);


                    },
                    deep: true //开启深度监听
                }
            },
            methods: {
                addNum: function() {
                    console.log("数量增加");
                    this.num++;
                    this.user.age++;
                }
            }
        });
    </script>
</body>

</html>